<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>北京科技报</title>
	<link href="css/common.css" rel="stylesheet">
	<link href="css/public.css" rel="stylesheet">
	<link href="css/header.css" rel="stylesheet">
	<link href="css/bookstarp.css" rel="stylesheet">
	<link href="css/swiper.css" rel="stylesheet">
	<script src="js/swiper.js"></script>
	<script src="js/vue.js"></script>
</head>

<body>
	<div class="header_box" id="header_vue">
		<div class="header flex justify-between align-end">
			<div class="flex justify-start align-end">
				<img class="logo" src="images/logoff.png" />
				<div class="color-ff sub_title">聚焦科学传播 弘扬科学精神</div>
			</div>
			<div class="flex justify-end align-end header_right">
				<div class="search_box">
					<input class="search_input" type="text" placeholder="请输入关键字搜索" />
					<img class="search_icon" src="images/home/search_icon.png" />
				</div>
				<div class="app_box">
					<img style="height: 36px;" src="images/home/app_icon.png" />
					<div class="font-12 color-ff margin-top-10" style="height: 20px;">APP下载</div>
					<div class="app-container">
						<div class="app-img-box">
							<img class="app-img" :src="qrCode" alt="QR Code">
							<img class="app-logo" src="images/home/app_icon.png" alt="Logo">
						</div>
						<div class="text-center margin-top-8 font-13">扫码分享当前页面</div>
					</div>
				</div>
				<div class="jz_box">
					<img style="height: 36px;" src="images/home/jz_icon.png" />
					<div class="font-12 color-ff margin-top-10" style="height: 20px;">融媒矩阵</div>
					<div class="jz-container">
						<ul>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/zh.png" alt="">
								<div class="margin-left-14 font-16 text-left jz-li-text">北京科技报知乎</div>
							</li>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/wx.png" alt="">
								<div class="margin-left-14 font-16 text-left jz-li-text">北京科技报微信</div>
							</li>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/tt.png" alt="">
								<div class="margin-left-14 font-16 text-left jz-li-text">北京科技报头条</div>
							</li>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/dy.png" alt="">
								<div class="margin-left-14 font-16 text-left jz-li-text">北京科技报抖音</div>
							</li>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/wb.png" alt="">
								<div class="margin-left-14 font-16 text-left jz-li-text">北京科技报微博</div>
							</li>
						</ul>
						<div class="jz-img-box">
							<img class="jz-img" :src="qrCode" alt="QR Code">
							<img class="jz-logo" src="images/home/app_icon.png" alt="Logo">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="header_slider_box">
			<div class="flex justify-between header_slider">
				<div v-for="(item,index) in sliderList" v-bind:key="index">
					<div v-if="!item.expand" class="slider_item">
						<a :class="item.sort == 1? 'active': ''" href="">{{ item.title }}</a>
						<div v-if="item.sort == 1" class="slider_line"></div>
					</div>
					<div v-else class="slider_item" v-on:click.stop="handleExpandSubSlider(item.sort)">
						<a class="flex align-center">
							<div>{{ item.title }}</div>
							<img class="slider_item_expand"
								v-bind:class="{'slider_item_retract':page_number == item.sort}" src="images/down.png" />
						</a>
						<div class="sub_slider_box" :class="page_number == item.sort? 'disBlock': ''">
							<div v-for="(sub,num) in item.subSlider" v-bind:key="num" class="sub_slider"><a href="">{{
									sub.title }}</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
<script src="js/header.js"></script>